import React, { useEffect } from 'react'
import ReactECharts from 'echarts-for-react'
import Service from '../../../../service';

export default function Index() {

  useEffect(()=>{
    getAfterSalesCurve()
    contractCurve()
    coustomerCurve()
    gendanCurve()
  },[])
  // 跟单统计总记录
  const getAfterSalesCurve = async ()=>{
    let result = await Service.dataAnalysis.afterSaleAnnualCurve()
    console.log(result.data)
  }
  // 合同年度曲线
  const contractCurve = async ()=>{
    let result = await Service.dataAnalysis.contractAnnualCurve()
    console.log(result.data)
  }
  // 客户年度曲线
  const coustomerCurve = async ()=>{
    let result = await Service.dataAnalysis.coustomerAnnualCurve()
    console.log(result.data)
  }
  // 跟单年度曲线
  const gendanCurve = async ()=>{
    let result = await Service.dataAnalysis.gendanAnnualCurve()
    console.log(result.data)
  }
  // 订单年度曲线
  const orderCurve = async ()=>{
    let result = await Service.dataAnalysis.orderAnnualCurve()
    console.log(result.data)
  }

  let option = {
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      data: ['新增客户', '跟单次数', '订单数量'],
      bottom:2
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '10%',
      containLabel: true
    },
    toolbox: {
      feature: {
        saveAsImage: {}
      }
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月','8月','9月','10月','11月','12月']
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        name: '新增客户',
        type: 'line',
        stack: 'Total',
        data: [120, 132, 101, 134, 90, 230, 210]
      },
      {
        name: '跟单次数',
        type: 'line',
        stack: 'Total',
        data: [220, 182, 191, 234, 290, 330, 310]
      },
      {
        name: '订单数量',
        type: 'line',
        stack: 'Total',
        data: [150, 232, 201, 154, 190, 330, 410]
      }
    ]
  };
  return (
    <div>
      <div className='staffTitle' style={{
        backgroundColor:"#eff0ef",
        color:"black",
        fontWeight:700,
        height:"33px",
        lineHeight:"33px",
        paddingLeft:"5px"
        }}>2022年度客户客户统计报表</div>
      <ReactECharts option={option} style={{width:"auto",height:"550px"}}/>
    </div>
  )
}
